<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>姓名：{{name}}</h2>
		<h2>性别：{{sex}}</h2>
		<!-- 
		有个小问题：假如age传过来的是18，怎么让年龄这里加1；{{age + 1}}这样吗？错的；
		
		思考个问题：传递过来的，age，name，sex参数存哪里去了？
							存vc身上了；
		
		
		 -->
		<h2>年龄：{{myage + 1}}</h2>
		
		<button @click="updateAge">尝试修改age</button>
	</div>
</template>

<!-- 
如何向组件传递参数：
	1.使用props配置项,共有3中配置方式;
	2.通过props传过来的这些参数是不允许修改的：
 -->
<script>
	export default {
		name:"ProposStudent",
		data(){
			return {
				msg:"我是尚硅谷的学生",
				/* 通过这种方式可以间接修改age;
				   为什么可以吧this.age赋值给myage？
					 因为props是优先被接受的，优先被放到vc上的；所有可以先获取到this.age,然后才能复制给myage
				 */
				myage:this.age, 
			}
		},
		methods:{
			updateAge(){
				this.myage++;
			}
		},
		//配置方式一：简单接收
		//props:["name","age","sex"] //没有顺序要求
		
		//配置方式二：对数据进行类型限制
		/* 
		props:{
			name:String,
			sex:String,
			age:Number
		} */
		
		//配置方式三：接收的同时对数据:进行类形限制+默认值的指定+必要性的限制
		props: {
			name:{
				type : String,  //name的类型是字符串
				required : true //name是必要的
			},
			age:{
				type : Number, 
				default : 99,  //默认值
			},
			sex:{
				type : String,
				required : true 
			}
		}
	}
</script>

<style>
</style>